<template>
  <div class="box">
    <div class="header">
      <!-- 导航栏 -->
      <van-icon
        class="navLeft"
        name="arrow-left"
        size="25"
        @click="onClickLeft"
      />
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        shape="round"
        background="aquamarine"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">{{ flag ? "搜索" : "取消" }}</div>
        </template>
      </van-search>
    </div>

    <div class="main">
      <!-- 当没有搜索时 -->
      <div class="noSeek" v-if="flag">
        <div>
          <h4>历史记录</h4>
           <!-- <div>
            <van-row type="flex" justify="center" align="bottom">
              <van-col
                span="6"
                offset="1"
                v-for="(item, index) in historyList"
                :key="index"
                >{{item}}</van-col
              >
            </van-row>
          </div> -->
        </div>
        <div>
          <h4>热门搜索</h4>
          <div>
            <van-row type="flex" justify="center" align="bottom">
              <van-col
                span="6"
                offset="1"
                v-for="(item, index) in hotList"
                :key="index"
                @click="diandian(index)"
                >{{ item.keyword }}</van-col
              >
            </van-row>
          </div>
        </div>
      </div>
      <!-- 搜索后 -->
      <div class="yesSeek" v-else>
        <ul :class="isshow? 'prolist2':'prolist1' " >
          <li v-for="(item) in seekList" :key="item.proid" @click="killMe(item.proid)">
            <img :src="item.img1" alt="" />
            <div>
              <h4 >{{ item.proname }}</h4>
              <p>￥{{ item.originprice }}</p>
            </div>
          </li>
        </ul>
         <div class="toCut" @click="isshow = !isshow">
            <van-icon name="bars" v-if="isshow" />
            <van-icon name="apps-o" v-else />
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Col, Row } from "vant";

Vue.use(Col);
Vue.use(Row);

import { searchAll, hotSeek } from "../api/kind";

export default {
  name: "SearchView",
  data() {
    return {
      value: "",
      hotList: [],
      flag: true,
      seekList: [],
      isshow:true,
    //   historyList:[],
    };
  },
  methods: {
    // 点击箭头返回
    onClickLeft() {
      this.$router.go(-3);
    },
    // 点击搜索或者回车搜索
    onSearch(val) {
      this.flag = !this.flag;
      searchAll({ count: 1, limitNum: 10, keyword: val }).then((res) => {
        console.log(res.data.data);
        this.seekList = res.data.data;
       
      });
    },
    diandian(index) {
      this.value = this.hotList[index].keyword;
    // this.$router.push('/class')
    },
    killMe(proid) {
         this.$router.push("/detail/"+proid)
    }
  },
  created() {
    hotSeek().then((res) => {
      console.log(res.data.data);
      this.hotList = res.data.data;
    });
  },
};
</script>

<style>
.header {
  display: flex;
  justify-content: space-around;
}
.prolist1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.prolist1 li {
  width: 48%;
}
.prolist1 li img {
  width: 100%;
}
.prolist2 li {
  display: flex;
}
.prolist2 li img {
  width: 30%;
  height: 40%;
}
.toCut {
  width: .3rem;
  height: .3rem;
  text-align: center;
  line-height: .3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: .7rem;
  right: .2rem;
}

</style>